// import { useMemo } from 'react';

import useResizeOb from '@/hooks/useResizeOb';
import {
  Types,
  useContextDispatch,
  useContextSelector
} from '@/pages/Editor/components/CanvasProvider/store';

import styles from './style.module.sass';

const CanvasRender = () => {
  const dispatch = useContextDispatch();
  const store = useContextSelector((state) => ({
    width: state.width,
    height: state.height,
    canvasContentStyle: state.canvasContentStyle
  }));
  const [elRef] = useResizeOb<HTMLDivElement>((entry) => {
    const { width, height } = entry;
    dispatch({ type: Types.RESIZE, payload: { width, height } });
  });

  return (
    <div ref={elRef} className={styles['canvas-render']}>
      <div className={styles['canvas-render__container']} style={store.canvasContentStyle}>
        <div className="canvas-render__content">
          <div className="canvas-render__content__canvas">
            <div className="canvas-render__content__canvas__header">
              <h1>
                画布的宽度{store.width}
                <br></br>
                画布的高度{store.height}
              </h1>
            </div>
            <div className="canvas-render__content__canvas__body">
              {/* Canvas rendering logic goes here */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CanvasRender;
